<template>
  <el-form :inline="true">
    <el-form-item label="一级分类">
      <el-select v-model="category1Id" placeholder="请选择" @change="changeCategory1Id" :disabled="isDisabled">
        <el-option :label="c1.name" :value="c1.id" v-for="(c1,index) in category1List" :key="c1.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="二级分类">
      <el-select v-model="category2Id" placeholder="请选择" @change="changeCategory2Id" :disabled="isDisabled">
        <el-option :label="c2.name" :value="c2.id" v-for="(c2,index) in category2List" :key="c2.id"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="三级分类">
      <el-select v-model="category3Id" placeholder="请选择" :disabled="isDisabled" @change="changeCategory3Id">
        <el-option :label="c3.name" :value="c3.id" v-for="(c3,index) in category3List" :key="c3.id"></el-option>
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    name: 'CategorySelect',
    data() {
      return {
        category1Id: '', //一级分类ID
        category2Id: '', //二级分类ID
        category3Id: '', //三级分类ID
        category1List: [], // 一级分类的列表数据收集
        category2List: [], // 二级分类的列表数据收集
        category3List: [], // 三级分类的列表数据收集
        isDisabled: false, //是否为置灰模式
      }
    },
    // 页面加载完毕的勾子
    mounted() {
      // 获取一级分类
      this.getCategory1List();
    },
    // 相关方法的回调函数
    methods: {
      async getCategory1List() {
        const result = await this.$API.category.getCategory1()
        if (result.code === 200) {
          // 将数据收集到data中
          this.category1List = result.data
        }
      },
      // 这里是用到了select的change事件回调函数--看element的API
      async changeCategory1Id(categoryId) {
        //   将当前的id给到一级id
        this.category1Id = categoryId
        //  将二级三级id置为空
        this.category2Id = '';
        this.category3Id = '';
        // 将二级三级数组列表置为空
        this.category2List = [];
        this.category3List = [];
        // 分发自定义事件,告诉父级组件,当前的级别的标识和此时的分类的id
        this.$emit('changeCategoryId', {
          level: 1,
          categoryId
        })
        //  根据1级id获取二级列表数据
        const result = await this.$API.category.getCategory2(categoryId)
        if (result.code === 200) {
          // 将数据收集到data中
          this.category2List = result.data
        }
      },
      async changeCategory2Id(categoryId) {
        //   将当前的id给到二级id
        this.category2Id = categoryId
        //   将三级id置为空
        this.category3Id = '';
        // 将三级数组列表置为空
        this.category3List = [];
        // 分发自定义事件,告诉父级组件,当前的级别的标识和此时的分类的id
        this.$emit('changeCategoryId', {
          level: 2,
          categoryId
        })
        //  根据2级id获取二级列表数据
        const result = await this.$API.category.getCategory3(categoryId)
        if (result.code === 200) {
          //将数据收集到data中
          this.category3List = result.data
        }
      },
      // 改变三级分类的选项的时候
      async changeCategory3Id(categoryId) {
        // 分发自定义事件,告诉父级组件,当前的级别的标识和此时的分类的id
        this.$emit('changeCategoryId', {
          level: 3,
          categoryId
        })
      }
    }
  }

</script>

<style>

</style>
